<template>
    <div class="userApplydetial body">
        <div class="userform">
            <!--基本信息-->
            <div class="aplymsg">
                <dl>
                    <dt><img :src="odata.personImg" alt=""></dt>
                    <dd>
                        <p>王建兴</p>
                        <p>14510988656</p>
                    </dd>
                </dl>
                <ul>
                    <li>申请时间：<span>2019-01-24 23:30:11</span></li>
                    <li>申请产品：<i>微金1号</i></li>
                    <li>资金需求：<i>200万</i></li>
                </ul>
            </div>
            <!--房产信息-->
            <div class="formlist">
                <p>
                    <span>房产信息</span>
                    <i @click="fangshow=true" v-show="!fangshow"><img :src="jianimg" alt=""></i>
                    <i @click="fangshow=false" v-show="fangshow"><img class="jianup" :src="jianimg" alt=""></i>
                </p>
                <div class="formbox" v-show="fangshow">
                    <dl>
                        <dd>房产类型</dd>
                        <dt @click="pickershow('fangchan')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{fangchantext}}</div>
                        </dt>
                        <awesome-picker
                            ref="fangchan"
                            :data="fangchan.data"
                            :anchor="fangchan.anchor"
                            :textTitle="fangchan.textTitle"
                            :colorTitle="fangchan.colorTitle"
                            :colorConfirm="fangchan.colorConfirm"
                            :swipeTime="fangchan.swipeTime"
                            @confirm="pickerConfirm('fangchan',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>所在区域</dd>
                        <dt><input type="text" placeholder="请输房产所在区域"></dt>
                    </dl>
                    <dl>
                        <dd>建筑面积</dd>
                        <dt><span style="margin-left: 0.1rem;">m²</span><input type="text" placeholder="请输入房产建筑面积"></dt>
                    </dl>

                    <dl>
                        <dd>产权证</dd>
                        <dt @click="pickershow('fangCertificate')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{fangCertificatetext}}</div>
                        </dt>
                        <awesome-picker
                            ref="fangCertificate"
                            :data="fangCertificate.data"
                            :anchor="fangCertificate.anchor"
                            :textTitle="fangCertificate.textTitle"
                            :colorTitle="fangCertificate.colorTitle"
                            :colorConfirm="fangCertificate.colorConfirm"
                            :swipeTime="fangCertificate.swipeTime"
                            @confirm="pickerConfirm('fangCertificate',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>购买方式</dd>
                        <dt @click="pickershow('fangbuytype')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{fangbuytypetext}}</div>
                        </dt>
                        <awesome-picker
                            ref="fangbuytype"
                            :data="fangbuytype.data"
                            :anchor="fangbuytype.anchor"
                            :textTitle="fangbuytype.textTitle"
                            :colorTitle="fangbuytype.colorTitle"
                            :colorConfirm="fangbuytype.colorConfirm"
                            :swipeTime="fangbuytype.swipeTime"
                            @confirm="pickerConfirm('fangbuytype',arguments)">
                        </awesome-picker>
                    </dl>
                </div>
            </div>
            <!--车辆信息-->
            <div class="formlist">
                <p>
                    <span>车辆信息</span>
                    <i @click="cheshow=true" v-show="!cheshow"><img :src="jianimg" alt=""></i>
                    <i @click="cheshow=false" v-show="cheshow"><img class="jianup" :src="jianimg" alt=""></i>
                </p>
                <div class="formbox" v-show="cheshow">
                    <dl>
                        <dd>品牌型号</dd>
                        <dt><input type="text" placeholder="请输车辆品牌型号"></dt>
                    </dl>
                    <dl>
                        <dd>车辆配置</dd>
                        <dt @click="pickershow('chePeizhi')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{chePeizhiText}}</div>
                        </dt>
                        <awesome-picker
                            ref="chePeizhi"
                            :data="chePeizhi.data"
                            :anchor="chePeizhi.anchor"
                            :textTitle="chePeizhi.textTitle"
                            :colorTitle="chePeizhi.colorTitle"
                            :colorConfirm="chePeizhi.colorConfirm"
                            :swipeTime="chePeizhi.swipeTime"
                            @confirm="pickerConfirm('chePeizhi',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>购买年限</dd>
                        <dt @click="pickershow('cheYear')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{cheYearText}}</div>
                        </dt>
                        <awesome-picker
                            ref="cheYear"
                            :data="cheYear.data"
                            :anchor="cheYear.anchor"
                            :textTitle="cheYear.textTitle"
                            :colorTitle="cheYear.colorTitle"
                            :colorConfirm="cheYear.colorConfirm"
                            :swipeTime="cheYear.swipeTime"
                            @confirm="pickerConfirm('cheYear',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>购买价格</dd>
                        <dt><span style="margin-left: 0.1rem;">万元</span><input type="text" placeholder="请输入车辆购买价格"></dt>
                    </dl>
                    <dl>
                        <dd>购买方式</dd>
                        <dt @click="pickershow('cheBytype')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{cheBytypeText}}</div>
                        </dt>
                        <awesome-picker
                            ref="cheBytype"
                            :data="cheBytype.data"
                            :anchor="cheBytype.anchor"
                            :textTitle="cheBytype.textTitle"
                            :colorTitle="cheBytype.colorTitle"
                            :colorConfirm="cheBytype.colorConfirm"
                            :swipeTime="cheBytype.swipeTime"
                            @confirm="pickerConfirm('cheBytype',arguments)">
                        </awesome-picker>
                    </dl>
                </div>
            </div>
            <!--保单信息-->
            <div class="formlist">
                <p>
                    <span>保单信息</span>
                    <i @click="baodanshow=true" v-show="!baodanshow"><img :src="jianimg" alt=""></i>
                    <i @click="baodanshow=false" v-show="baodanshow"><img class="jianup" :src="jianimg" alt=""></i>
                </p>
                <div class="formbox" v-show="baodanshow">
                    <dl>
                        <dd>保险公司</dd>
                        <dt><input type="text" placeholder="请输保险公司名称"></dt>
                    </dl>
                    <dl>
                        <dd>保单类型</dd>
                        <dt @click="pickershow('baodanType')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{baodanTypeText}}</div>
                        </dt>
                        <awesome-picker
                            ref="baodanType"
                            :data="baodanType.data"
                            :anchor="baodanType.anchor"
                            :textTitle="baodanType.textTitle"
                            :colorTitle="baodanType.colorTitle"
                            :colorConfirm="baodanType.colorConfirm"
                            :swipeTime="baodanType.swipeTime"
                            @confirm="pickerConfirm('baodanType',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>缴存时间</dd>
                        <dt @click="pickershow('baodanJiaotime')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{baodanJiaotimeText}}</div>
                        </dt>
                        <awesome-picker
                            ref="baodanJiaotime"
                            :data="baodanJiaotime.data"
                            :anchor="baodanJiaotime.anchor"
                            :textTitle="baodanJiaotime.textTitle"
                            :colorTitle="baodanJiaotime.colorTitle"
                            :colorConfirm="baodanJiaotime.colorConfirm"
                            :swipeTime="baodanJiaotime.swipeTime"
                            @confirm="pickerConfirm('baodanJiaotime',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>缴费方式</dd>
                        <dt @click="pickershow('baodanJiaotype')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{baodanJiaotypeText}}</div>
                        </dt>
                        <awesome-picker
                            ref="baodanJiaotype"
                            :data="baodanJiaotype.data"
                            :anchor="baodanJiaotype.anchor"
                            :textTitle="baodanJiaotype.textTitle"
                            :colorTitle="baodanJiaotype.colorTitle"
                            :colorConfirm="baodanJiaotype.colorConfirm"
                            :swipeTime="baodanJiaotype.swipeTime"
                            @confirm="pickerConfirm('baodanJiaotype',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>是否断缴</dd>
                        <dt @click="pickershow('baodanOver')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{baodanOverText}}</div>
                        </dt>
                        <awesome-picker
                            ref="baodanOver"
                            :data="baodanOver.data"
                            :anchor="baodanOver.anchor"
                            :textTitle="baodanOver.textTitle"
                            :colorTitle="baodanOver.colorTitle"
                            :colorConfirm="baodanOver.colorConfirm"
                            :swipeTime="baodanOver.swipeTime"
                            @confirm="pickerConfirm('baodanOver',arguments)">
                        </awesome-picker>
                    </dl>
                </div>
            </div>
            <!--企业信息-->
            <div class="formlist">
                <p>
                    <span>企业信息</span>
                    <i @click="qiyeshow=true" v-show="!qiyeshow"><img :src="jianimg" alt=""></i>
                    <i @click="qiyeshow=false" v-show="qiyeshow"><img class="jianup" :src="jianimg" alt=""></i>
                </p>
                <div class="formbox" v-show="qiyeshow">
                    <dl>
                        <dd>注册时间</dd>
                        <dt><span style="margin-left: 0.1rem;">年</span><input type="text" placeholder="请输入企业注册时间"></dt>
                    </dl>
                    <dl>
                        <dd>企业类型</dd>
                        <dt @click="pickershow('qiyeType')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{qiyeTypeText}}</div>
                        </dt>
                        <awesome-picker
                            ref="qiyeType"
                            :data="qiyeType.data"
                            :anchor="qiyeType.anchor"
                            :textTitle="qiyeType.textTitle"
                            :colorTitle="qiyeType.colorTitle"
                            :colorConfirm="qiyeType.colorConfirm"
                            :swipeTime="qiyeType.swipeTime"
                            @confirm="pickerConfirm('qiyeType',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>经营项目</dd>
                        <dt><input type="text" placeholder="请输企业经营项目"></dt>
                    </dl>
                    <dl>
                        <dd>对公流水</dd>
                        <dt><span style="margin-left: 0.1rem;">万元</span><input type="text" placeholder="请输入对公流水"></dt>
                    </dl>
                    <dl>
                        <dd>个人流水</dd>
                        <dt><span style="margin-left: 0.1rem;">万元</span><input type="text" placeholder="请输入个人流水"></dt>
                    </dl>
                </div>
            </div>
            <!--工作信息-->
            <div class="formlist">
                <p>
                    <span>工作信息</span>
                    <i @click="jobshow=true" v-show="!jobshow"><img :src="jianimg" alt=""></i>
                    <i @click="jobshow=false" v-show="jobshow"><img class="jianup" :src="jianimg" alt=""></i>
                </p>
                <div class="formbox" v-show="jobshow">
                    <dl>
                        <dd>工作单位</dd>
                        <dt><span style="margin-left: 0.1rem;">年</span><input type="text" placeholder="请输入工作单位名称"></dt>
                    </dl>
                    <dl>
                        <dd>工资发放形式</dd>
                        <dt @click="pickershow('jobPaywages')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{jobPaywagesText}}</div>
                        </dt>
                        <awesome-picker
                            ref="jobPaywages"
                            :data="jobPaywages.data"
                            :anchor="jobPaywages.anchor"
                            :textTitle="jobPaywages.textTitle"
                            :colorTitle="jobPaywages.colorTitle"
                            :colorConfirm="jobPaywages.colorConfirm"
                            :swipeTime="jobPaywages.swipeTime"
                            @confirm="pickerConfirm('jobPaywages',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>月工资</dd>
                        <dt><span style="margin-left: 0.1rem;">元</span><input type="text" placeholder="请输入月工资"></dt>
                    </dl>
                    <dl>
                        <dd>工作年限</dd>
                        <dt><span style="margin-left: 0.1rem;">年</span><input type="text" placeholder="请输入工作年限"></dt>
                    </dl>
                    <dl>
                        <dd>本地社保</dd>
                        <dt @click="pickershow('jobSocialsecurity')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{jobSocialsecurityText}}</div>
                        </dt>
                        <awesome-picker
                            ref="jobSocialsecurity"
                            :data="jobSocialsecurity.data"
                            :anchor="jobSocialsecurity.anchor"
                            :textTitle="jobSocialsecurity.textTitle"
                            :colorTitle="jobSocialsecurity.colorTitle"
                            :colorConfirm="jobSocialsecurity.colorConfirm"
                            :swipeTime="jobSocialsecurity.swipeTime"
                            @confirm="pickerConfirm('jobSocialsecurity',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>本地公积金</dd>
                        <dt @click="pickershow('jobAccumulationfund')">
                            <div class="picimg">
                                <img :src="jianimg" alt="">
                            </div>
                            <div class="pciker">{{jobAccumulationfundText}}</div>
                        </dt>
                        <awesome-picker
                            ref="jobAccumulationfund"
                            :data="jobAccumulationfund.data"
                            :anchor="jobAccumulationfund.anchor"
                            :textTitle="jobAccumulationfund.textTitle"
                            :colorTitle="jobAccumulationfund.colorTitle"
                            :colorConfirm="jobAccumulationfund.colorConfirm"
                            :swipeTime="jobAccumulationfund.swipeTime"
                            @confirm="pickerConfirm('jobAccumulationfund',arguments)">
                        </awesome-picker>
                    </dl>
                    <dl>
                        <dd>逾期情况</dd>
                        <dt><span style="margin-left: 0.1rem;">次</span><input type="text" placeholder="请输入逾期情况"></dt>
                    </dl>
                    <dl>
                        <dd>备注</dd>
                        <dt><input type="text" placeholder=""></dt>
                    </dl>
                </div>
            </div>
            <!--提交-->
            <div class="tijiao" @click="tijiao">转为意向客户</div>
        </div>
    </div>
</template>

<script>
    import picker from '../js/picker'

    export default {
        components: {picker},
        name: "userApplydetial",
        data() {
            return {
                jianimg: require('../img/jianright.png'),
                odata:{
                    personImg:require('../img/ceshi.jpg')
                },
                daikuan: {},
                daikuamtext: '',
                zhuzhai: {},
                zhuzhaitext: '',
                //房产相关
                fangshow: false,
                fangchan: {},
                fangchantext: '',
                fangCertificate: {},
                fangCertificatetext: '',
                fangbuytype: {},
                fangbuytypetext: '',
                //车辆相关
                cheshow: false,
                chePeizhi: {},
                chePeizhiText: '',
                cheYear: {},
                cheYearText: '',
                cheBytype: {},
                cheBytypeText: '',
                //保单信息
                baodanshow: false,
                baodanType: {},
                baodanTypeText: '',
                baodanJiaotime: {},
                baodanJiaotimeText: '',
                baodanJiaotype: {},
                baodanJiaotypeText: '',
                baodanOver: {},
                baodanOverText: '',
                //企业信息
                qiyeshow: false,
                qiyeType: {},
                qiyeTypeText: '',
                //工作信息
                jobshow: false,
                jobPaywages: {},
                jobPaywagesText: '',
                jobSocialsecurity: {},
                jobSocialsecurityText: '',
                jobAccumulationfund: {},
                jobAccumulationfundText: '',
                record:false
            }
        },
        mounted() {
            this.daikuan = picker.daikuan;
            this.zhuzhai = picker.zhuzhai;
            this.fangchan = picker.fangchan;
            this.fangCertificate = picker.fangCertificate;
            this.fangbuytype = picker.fangbuytype;
            this.chePeizhi = picker.chePeizhi;
            this.cheYear = picker.cheYear;
            this.cheBytype = picker.cheBytype;
            this.baodanType = picker.baodanType;
            this.baodanJiaotime = picker.baodanJiaotime;
            this.baodanJiaotype = picker.baodanJiaotype;
            this.baodanOver = picker.baodanOver;
            this.qiyeType = picker.qiyeType;
            this.jobPaywages = picker.jobPaywages;
            this.jobSocialsecurity = picker.jobSocialsecurity;
            this.jobAccumulationfund = picker.jobAccumulationfund;
        },
        methods: {
            pickershow(e) {
                switch (e) {
                    case "daikuan":
                        this.$refs.daikuan.show();
                        break;
                    case "zhuzhai":
                        this.$refs.zhuzhai.show();
                        break;
                    case "fangchan":
                        this.$refs.fangchan.show();
                        break;
                    case "fangCertificate":
                        this.$refs.fangCertificate.show();
                        break;
                    case "fangbuytype":
                        this.$refs.fangbuytype.show();
                        break;
                    case "chePeizhi":
                        this.$refs.chePeizhi.show();
                        break;
                    case "cheYear":
                        this.$refs.cheYear.show();
                        break;
                    case "cheBytype":
                        this.$refs.cheBytype.show();
                        break;
                    case "baodanType":
                        this.$refs.baodanType.show();
                        break;
                    case "baodanJiaotime":
                        this.$refs.baodanJiaotime.show();
                        break;
                    case "baodanJiaotype":
                        this.$refs.baodanJiaotype.show();
                        break;
                    case "baodanOver":
                        this.$refs.baodanOver.show();
                        break;
                    case "qiyeType":
                        this.$refs.qiyeType.show();
                        break;
                    case "jobPaywages":
                        this.$refs.jobPaywages.show();
                        break;
                    case "jobSocialsecurity":
                        this.$refs.jobSocialsecurity.show();
                        break;
                    case "jobAccumulationfund":
                        this.$refs.jobAccumulationfund.show();
                        break;
                }
            },
            pickerConfirm(e, data) {
                switch (e) {
                    case "daikuan":
                        this.daikuamtext = data[0][0].value;
                        break;
                    case "zhuzhai":
                        this.zhuzhaitext = data[0][0].value;
                        break;
                    case "fangchan":
                        this.fangchantext = data[0][0].value;
                        break;
                    case "fangCertificate":
                        this.fangCertificatetext = data[0][0].value;
                        break;
                    case "fangbuytype":
                        this.fangbuytypetext = data[0][0].value;
                        break;
                    case "chePeizhi":
                        this.chePeizhiText = data[0][0].value;
                        break;
                    case "cheYear":
                        this.cheYearText = data[0][0].value;
                        break;
                    case "cheBytype":
                        this.cheBytypeText = data[0][0].value;
                        break;
                    case "baodanType":
                        this.baodanTypeText = data[0][0].value;
                        break;
                    case "baodanJiaotime":
                        this.baodanJiaotimeText = data[0][0].value;
                        break;
                    case "baodanJiaotype":
                        this.baodanJiaotypeText = data[0][0].value;
                        break;
                    case "baodanOver":
                        this.baodanOverText = data[0][0].value;
                        break;
                    case "qiyeType":
                        this.qiyeTypeText = data[0][0].value;
                        break;
                    case "jobPaywages":
                        this.jobPaywagesText = data[0][0].value;
                        break;
                    case "jobSocialsecurity":
                        this.jobSocialsecurityText = data[0][0].value;
                        break;
                    case "jobAccumulationfund":
                        this.jobAccumulationfundText = data[0][0].value;
                        break;
                }
            },
            tijiao() {

            }
        }
    }
</script>

<style scoped lang="less">
    html, body, #app, .body {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    @import "../style/form.less";
</style>
